{% extends 'base.html' %}

{% block title %}视频数据分析折线图{% endblock %}

{% block head %}
{% endblock %}

{% block body %}
<div class="container mt-5">
    <!-- 下拉框 -->
    <div class="form-group">
        <label for="datePicker">选择日期：</label>
        <input type="date" class="form-control" id="datePicker">
    </div>
    <!-- 折线图容器 -->
    <div id="line" class="mt-3" style="width:1000px; height:600px;"></div>
</div>
{% endblock %}

{% block js %}
<script>
    var chart = echarts.init(document.getElementById('line'), 'white', {renderer: 'canvas'});

    // 页面加载完毕后执行
    $(function () {
        // 获取当前日期并填充到日期选择框中
        var today = new Date();
        var formattedDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
        $("#datePicker").val(formattedDate);

        // 加载默认日期对应的数据
        fetchData(chart, formattedDate);

        // 添加日期选择框的改变事件监听器
        $("#datePicker").change(function () {
            var selectedDate = $(this).val();
            fetchData(chart, selectedDate);
        });
    });

    // 获取指定日期的数据
    function fetchData(chart, selectedDate) {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:5000/analysis/get_line_by_time/",
            data: {
                date: selectedDate
            },
            dataType: 'json',
            success: function (result) {
                chart.setOption(result);
            }
        });
    }
</script>
{% endblock %}